

<template>
    <div id="goods">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li v-for="(item,index) in goods" class="menu-item" :class="{'current': currentIndex === index}" @click="selectMenu(index,$event)">
                    <span class="text border-1px"><span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodsWrapper">
            <ul class="foods-list">
                <li v-for="item in goods" class="food-list food-list-hook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul class="foods-item">
                        <li v-for="food in item.foods" class="food-item" @click.stop="foodDetail(food)">
                            <div class="icon">
                                <img v-lazy="food.icon" alt="" width="57" height="57">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p v-show="food.description" class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span>月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="new-price">￥{{food.price}}</span>
                                    <del v-show="food.oldPrice" class="old-price">￥{{food.oldPrice}}</del>
                                </div>
                                <div class="cartControl-wrapper">
                                    <cartControl :food="food" @add="addFood"></cartControl>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopCart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice" :selectFoods="selectFoods" ref="shopCart"></shopCart>
        <food ref="food" :food="selectFood" @add="addFood"></food>
    </div>
</template>



<script>

import BScroll from 'better-scroll';
import ShopCart from 'components/shopCart/shopCart.vue';   //购物车组件
import CartControl from 'components/cartControl/cartControl.vue';   //购买按钮组件
import  Food from 'components/food/food.vue';   //商品详情组件

const ERR_OK = 0;

export default {
    props: {
        seller: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return {
            goods: [],
            listHeight: [],
            scrollY: 0,
            selectFood: {}
        }
    },
    created(){
        this.classMap = ['decrease','discount','special','invoice','guarantee'];
        this.$http.get('/api/goods').then((res) => {
            const data = res.data;
            if(data.errno === ERR_OK){
                this.goods = data.data;
                this.$nextTick(() => {
                     this._initScroll();
                     this._calculateHeight();
                });
            }
        }, (err) => {
            alert(err);
        });
    },
    computed: {
        currentIndex(){
            for(let i=0; i<this.listHeight.length; i++){
                let height1 = this.listHeight[i];
                let height2 = this.listHeight[i+1];
                if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
                    return i;
                }
            }
            return 0;
        },
        selectFoods() {
            let foodArr = [];
            this.goods.forEach((good) => {
                good.foods.forEach((food) => {
                    if(food.count){
                      foodArr.push(food);
                    }
                });
            });
            return foodArr;
        }
    },
    methods: {
        //初始化BScroll
        _initScroll(){
            this.menuWrapper = new BScroll(this.$refs.menuWrapper, {
                click: true
            });
            this.foodsWrapper = new BScroll(this.$refs.foodsWrapper, {
                click: true,
                probeType: 3    //滚动的时候时时监听滚动的位置
            });
            this.foodsWrapper.on('scroll', (pos) => {
                this.scrollY = Math.abs(Math.round(pos.y));
                // console.log(this.scrollY);
            });
        },
        _calculateHeight(){
            let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let height = 0;
            this.listHeight.push(height);
            for(let i=0; i<foodList.length; i++){
                let item = foodList[i];
                height += item.clientHeight
                this.listHeight.push(height);
            }
            // console.log(this.listHeight);
        },
        selectMenu(index, event){
            if(!event._constructed){    //在pc端执行的时候
                return;
            }
            let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let el = foodList[index];
            this.foodsWrapper.scrollToElement(el, 1000);
        },
        addFood(target){
            this._drop(target);
        },
        _drop(target){
            //体验优化，异步执行下落动画
            this.$nextTick(() => {
                this.$refs.shopCart.drop(target);
            });
        },
        foodDetail(food, evevt){
            if(!event._constructed){    //在pc端执行一次点击事件
                return;
            }
            this.selectFood = food;
            this.$refs.food.show();
        }
    },
    components: {
        'shopCart': ShopCart,
        'cartControl': CartControl,
        'food': Food
    }
}

</script>




<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~common/stylus/mixin.stylus';

    #goods{
        display: flex;
        position: absolute;
        top: 174px;
        bottom: 46px;
        width: 100%;
        overflow: hidden;
        .menu-wrapper{
            flex: 0 0 80px;
            width: 80px;
            background: #f3f5f7;
            .menu-item{
                display: table;
                width: 56px;
                height: 54px;
                line-height: 14px;
                padding: 0 12px;
                &.current{
                    position: relative;
                    z-index: 10;
                    background: #fff;
                    margin-top: -1px;
                    .text{
                        font-weight: bold;
                        border-none();
                        color: #f60;
                    }
                }
                .text{
                    display: table-cell;
                    vertical-align: middle;
                    width: 56px;
                    font-size: 12px;
                    border-1px(rgba(7,17,27,0.2));
                    .icon{
                        width: 12px;
                        height: 12px;
                        margin-right: 2px;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        display: inline-block;
                        vertical-align: top;
                        &.decrease{
                            bg-image('decrease_3');
                        }
                        &.discount{
                            bg-image('discount_3');
                        }
                        &.guarantee{
                            bg-image('guarantee_3');
                        }
                        &.invoice{
                            bg-image('invoice_3');
                        }
                        &.special{
                            bg-image('special_3');
                        }
                    }
                }
            }
        }
        .foods-wrapper{
            flex: 1;
            .foods-list{
                .food-list{
                    .title{
                        height: 26px;
                        line-height: 26px;
                        padding-left: 14px;
                        border-left: #f60 solid 2px;
                        font-size: 14px;
                        color: #f60;
                        background: #f3f5f7;
                    }
                    .foods-item{
                        .food-item{
                            display: flex;
                            margin: 18px;
                            padding-bottom: 10px;
                            border-1px(rgba(7,17,27,0.1));
                            &:last-child{
                                border-none();
                                margin-bottom: 0;
                            }
                            .icon{
                                flex: 0 0 57px;
                                width: 57px;
                                height: 57px;
                                margin-right: 10px;
                                margin-top: 5px;
                            }
                            .content{
                                flex: 1;
                                position: relative;
                                .name{
                                    margin: 2px 0 8px 0;
                                    font-size: 14px;
                                    line-height: 14px;
                                    color: rgb(7,17,27);
                                }
                                .desc{
                                    width: 180px;
                                    margin-bottom: 8px;
                                    font-size: 10px;
                                    line-height: 12px;
                                    color: rgb(147,153,159);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                                .extra{
                                    margin-bottom: 4px;
                                    font-size: 10px;
                                    line-height: 10px;
                                    color: rgb(147,153,159);
                                    span:nth-child(1){
                                        margin-right: 8px;
                                    }
                                }
                                .price{
                                    font-weight: bold;
                                    line-height: 24px;
                                    .new-price{
                                        font-size: 14px;
                                        margin-right: 8px;
                                        color: rgb(240,20,20);
                                    }
                                    .old-price{
                                        font-size: 10px;
                                        color: rgb(147,153,159);
                                    }
                                }
                                .cartControl-wrapper{
                                    position: absolute;
                                    right: 0;
                                    bottom: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }


</style>




